import React, {Component} from 'react'
import { 
  DetailWrapper,
  DetailTitle,
  DetailContent, 
  DetailAuthor
} from './style'
import { connect } from 'react-redux'
import { actionCreator } from './store'
import { withRouter } from 'react-router-dom'

class Detail extends Component{
  render() {
    const { title, content } = this.props;
    return(
      <DetailWrapper>
        <DetailTitle>{title}</DetailTitle>
        <DetailAuthor></DetailAuthor>
        <DetailContent dangerouslySetInnerHTML={{ __html: content}}>
        </DetailContent>
      </DetailWrapper>
    )
  }
  componentDidMount(){
    const { match } = this.props;
    this.props.getDetailInfo(match.params.id);
  }
}
const mapStateToProps = (state) => ({
  title:state.getIn(['detail','title']),
  content:state.getIn(['detail','content'])
})

const mapDispatchToProps = (dispatch) => {
  return {
    getDetailInfo(id) {
      dispatch( actionCreator.getDetailInfo(id) )
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail))